<template>
  <div>
    <div v-if="searchStatus" class="box-shadow pad10 mgb10">
      <el-form :model="queryParams" ref="queryRef" :inline="true" class="fnmb">
        <div class="flex jbetween acenter">
          <div>
            <el-form-item label="编号">
              <el-input
                v-model="queryParams.Code"
                placeholder="请输入"
                clearable
                style="width: 200px"
                @keyup.enter="handleQuery"
              />
            </el-form-item>
            <el-form-item label="名称">
              <el-input
                v-model="queryParams.Name"
                placeholder="请输入"
                clearable
                style="width: 200px"
                @keyup.enter="handleQuery"
              />
            </el-form-item>
          </div>
          <div class="flex jend fnw">
            <el-button type="primary" icon="Search" @click="handleQuery"
              >搜索</el-button
            >
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </div>
        </div>
      </el-form>
    </div>
    <MyTable
      :tableList="tableList"
      :total="Total"
      :columns="columns"
      v-model:page="page"
      v-model:searchStatus="searchStatus"
      :btnList="$checkBtn(['ProblemCategory:edit', 'ProblemCategory:delete'])"
      @getList="getList"
      @edit="handleEdit"
      @delete="handleDelete"
    >
      <template v-slot:tabTop>
        <el-button
          type="primary"
          v-hasPermi="['ProblemCategory:add']"
          icon="CirclePlusFilled"
          @click="handleAdd"
          >添加类型</el-button
        >
      </template>
    </MyTable>
    <MyDialog
      v-model:show="show"
      :title="title"
      :formRef="formRef"
      :width="500"
      @confirm="confirm"
    >
      <el-form
        :model="formData"
        :rules="rules"
        inline
        :label-width="80"
        ref="formRef"
        class="wid100"
      >
        <el-form-item label="编号" prop="Code">
          <el-input v-model="formData.Code" placeholder="请输入" clearable />
        </el-form-item>
        <el-form-item label="名称" prop="Name">
          <el-input v-model="formData.Name" placeholder="请输入" clearable />
        </el-form-item>
      </el-form>
    </MyDialog>
  </div>
</template>

<script setup name="ProblemCategory">
import { ref, getCurrentInstance, onMounted } from "vue";
import {
  AddSixSaleType,
  EditSixSaleType,
  DelSixSaleType,
  GetSixSaleTypeList_Page,
} from "@/api/sixManage/problemType.js";

const { proxy } = getCurrentInstance();
const tableList = ref([]);
const Total = ref(0);
const columns = ref([
  { label: "序号" },
  { label: "编号", prop: "Code" },
  { label: "名称", prop: "Name" },

  { label: "创建时间", prop: "CreateTime" },
  { label: "创建人", prop: "CreateUser", user: true },
  { label: "修改时间", prop: "UpdateTime" },
  { label: "修改人", prop: "UpdateUser", user: true },
  { label: "操作", width: 160 },
]);
proxy.$formatKey(columns.value);
const page = ref({
  PageIndex: 1,
  PageSize: 10,
});
const searchStatus = ref(true);
const queryParams = ref({
  Code: "",
  Name: "",
  NoPage: "", //如果传"true"，则返回全部数据不分页
});
const queryRef = ref();
const show = ref(false);
const title = ref();
const formRef = ref();
const rules = ref({
  Code: [{ required: true, message: "请输入", trigger: "blur" }],
  Name: [{ required: true, message: "请输入", trigger: "blur" }],
  Principal: [{ required: true, message: "请选择", trigger: "change" }],
});
const formData = ref({});

onMounted(() => {
  getList();
});

async function getList() {
  try {
    show.value = false;
    let query = {
      ...queryParams.value,
      ...page.value,
    };
    let res = await GetSixSaleTypeList_Page(query);
    tableList.value = res.data.List;
    Total.value = res.data.Total;
  } catch (error) {
    console.log(error);
  }
}

async function confirm(val) {
  try {
    if (val) {
      let query = {
        ...formData.value,
      };
      if (formData.value.ID) {
        await EditSixSaleType(query);
        proxy.$modal.msgSuccess("修改成功");
      } else {
        await AddSixSaleType(query);
        proxy.$modal.msgSuccess("添加成功");
      }

      getList();
    }
  } catch (error) {
    console.log(error);
  }
}

function handleEdit(row) {
  title.value = "修改问题类型";
  formData.value = {
    ...row,
  };
  show.value = true;
}
async function handleDelete(row) {
  try {
    await DelSixSaleType({ ID: row.ID });
    proxy.$modal.msgSuccess("删除成功");
    getList();
  } catch (error) {
    console.log(error);
  }
}
function handleAdd() {
  formData.value = {};
  show.value = true;
  title.value = "添加问题类型";
}
function handleQuery() {
  page.value.PageIndex = 1;
  getList();
}
function resetQuery() {
  queryParams.value = {
    Code: "",
    Name: "",
    NoPage: "",
  };
  handleQuery();
}
</script>

<style lang="scss" scoped></style>
